<template>
  <div>
    <div style="text-align: left; margin: 5px">
      <!--查询-->
      <el-input type="text"
                style="width: 200px; "
                placeholder="查询参数1"
                size="mini"
                v-model="params.searchParam1" clearable>
      </el-input>
      <el-button size="mini" @click="clearSearchParams" style="margin-left: 10px">
        清空
      </el-button>
      <el-button size="mini" type="primary" >
        查询
      </el-button>
    </div>

    <!--列表-->
    <div style="margin: 0px 10px;text-align: left;">
      <el-table
        :data="adminLogs"
        stripe>

        <el-table-column prop="username" label="用户名" sortable></el-table-column>
        <el-table-column prop="api" label="api接口"></el-table-column>
        <el-table-column prop="detail" label="操作描述"></el-table-column>
        <el-table-column label="是否成功">
          <template slot-scope="scope">
            {{scope.row.success ? "操作成功" : "操作失败"}}
          </template>
        </el-table-column>
        <el-table-column prop="params" label="请求参数" show-tooltip-when-overflow></el-table-column>
        <el-table-column prop="result" label="返回结果" show-tooltip-when-overflow></el-table-column>
        <el-table-column prop="method" label="接口方法" show-tooltip-when-overflow></el-table-column>
        <el-table-column prop="ip" label="ip地址"></el-table-column>
        <el-table-column prop="timestamp" label="操作时间" sortable></el-table-column>
      </el-table>
      <!--分页组件-->
      <el-row style="float: right">
        <el-pagination
          @current-change="changePageNo"
          @size-change="changePageSize"
          :current-page.sync="params.pageNo"
          :page-sizes="[5, 10, 20, 30, 50, 100]"
          :page-size.sync="params.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-row>

    </div>
  </div>
</template>

<script>

  import {getAdminLogs} from "@/api/modules/system/AdminLogApi";

  export default {
    name: "adminLogComponent",
    data() {
      return {
        // 查询参数
        params: {
          searchParam1: null,
          pageNo: 1,
          pageSize: 10,
        },
        total: 0,
        adminLogs: [],
      }
    },
    mounted() {
      this.getAdminLogs()
    },
    methods: {
      // 获取数据
      getAdminLogs() {
        let that = this;
        getAdminLogs(that.params.pageNo, that.params.pageSize).then(result => {
          that.adminLogs = result.data.records;
          that.total = result.data.total;
        })
      },
      // 切换页数
      changePageNo(pageNo) {
        this.params.pageNo = pageNo;
        this.getAdminLogs()
      },
      // 改变页面大小
      changePageSize(pageSize) {
        this.params.pageSize = pageSize;
        this.getAdminLogs()
      },
      // 清除查询参数
      clearSearchParams() {
        this.params.searchParam1 = null;
      }
    }
  }
</script>
